<template>
	<!-- 物料齐套查询 -->
	<div>
		<div style="height:3000px">
			<v-card>
				<v-card-title>
					<v-row class="mt-2">
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="项目号" v-model="materialCompleteQuery.projectcode" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="工单号" v-model="materialCompleteQuery.childrencode" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="设备名称" v-model="materialCompleteQuery.equiname" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="3" md="2">
							<v-text-field label="设备型号" v-model="materialCompleteQuery.equimodel" dense outlined>
							</v-text-field>
						</v-col>
						<v-col>
							<v-btn color="primary" @click="LoadPage">查询</v-btn>
							<v-btn class="ml-3" depressed color="primary" @click="RefreshApps">
								刷新</v-btn>
						</v-col>
					</v-row>
				</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12" md="6">
							<v-alert text color="blue-grey" class="text-center">装配设备信息</v-alert>
							<v-data-table :headers="materialCompleteHeaderList" :items="materialCompleteDataList" small
								fixed-header item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
								:loading="materialCompleteLoading" :options.sync="materialCompleteOptions"
								:footer-props="vuetifyDefaultPage" :server-items-length="materialCompleteTotalCount">
							</v-data-table>
						</v-col>
						<v-col cols="12" md="6">
							<v-alert text color="blue-grey" class="text-center">物料齐套状况(标红表示库存数量不足)</v-alert>
							<v-data-table :headers="inventoryHeaderList" :items="inventoryDataList" small fixed-header
								item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
								:loading="materialCompleteLoading" :footer-props="vuetifyDefaultPage">
								<template v-slot:item="{item}">
									<tr :style="item.库存总数量<=0||item.库存总数量<item.需求总数量?'background:#f9bfd4;':''">
										<td class="text-left">{{ item.所需物料名称 }}</td>
										<td class="text-center">{{ item.所需物料类型 }}</td>
										<td class="text-center">{{ item.需求总数量 }}</td>
										<td class="text-center">{{item.库存总数量}}</td>
										<td class="text-center">{{ item.所属仓库}}</td>
										<td class="text-left">{{ item.所需物料结构 }}</td>
									</tr>
								</template>
							</v-data-table>
						</v-col>
					</v-row>

				</v-card-text>
			</v-card>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'material_complete_query',
		data: () => ({
			materialCompleteQuery: {
				projectcode: '',
				childrencode: '',
				equiname: '',
				equimodel: '',
			},

			materialCompleteHeaderList: [{
					text: '项目号',
					align: 'left',
					value: 'projectcode',
					filterable: false,
				},
				{
					text: '名称',
					align: 'left',
					value: 'name',
					filterable: false,
				},
				{
					text: '存货编号',
					align: 'center',
					value: 'piccode',
					filterable: false,
				},
				{
					text: '规格',
					align: 'center',
					value: 'specifications',
					filterable: false,
				},
				{
					text: '数量',
					align: 'center',
					value: 'totalcount',
					filterable: false,
				}, {
					text: '单位',
					align: 'center',
					value: 'unit',
					filterable: false,
				},
				{
					text: '结构',
					align: 'left',
					value: 'keypathname',
					filterable: false,
				},
			],
			//库存信息
			inventoryHeaderList: [{
					text: '所需物料名称',
					align: 'left',
					value: '所需物料名称',
					filterable: false,
				},
				{
					text: '所需物料类型',
					align: 'center',
					value: '所需物料类型',
					filterable: false,
				},
				{
					text: '需求总数量',
					align: 'center',
					value: '需求总数量',
					filterable: false,
				},
				{
					text: '库存总数量',
					align: 'center',
					value: '库存总数量',
					filterable: false,
				},
				{
					text: '所属仓库',
					align: 'center',
					value: '所属仓库',
					filterable: false,
				},
				{
					text: '所需物料结构',
					align: 'left',
					value: '所需物料结构',
					filterable: false,
				},
			],
			inventoryDataList: [],
			//物料信息
			materialCompleteDataList: [],
			materialCompleteTotalCount: 0,
			materialCompleteLoading: true,
			materialCompleteOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},

		}),
		watch: {
			materialCompleteOptions: {
				handler() {
					this.LoadPage()
				},
				deep: true
			},
		},
		methods: {
			AA(item) {
				return parseInt(item) * 12
			},
			RefreshApps() {
				this.materialCompleteQuery.projectcode = ''
				this.materialCompleteQuery.childrencode = ''
				this.materialCompleteQuery.equiname = ''
				this.materialCompleteQuery.equimodel = ''
			},
			async LoadPage() {
				this.systemLogLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESMaterialComplete/LoadPage?projectcode=${this.materialCompleteQuery.projectcode}&
					childrencode=${this.materialCompleteQuery.childrencode}&
					equiname=${this.materialCompleteQuery.equiname}&
					equimodel=${this.materialCompleteQuery.equimodel}&
					pageNumber=${this.materialCompleteOptions.page}&
					pageSize=${this.materialCompleteOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.materialCompleteDataList = response.data.data.result
					this.materialCompleteTotalCount = response.data.data.pagination.totalRecords

					this.inventoryDataList = response.data.inventoryResult
					this.materialCompleteLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
		},
	}
</script>


<style>
</style>
